<template>
	<view class="mine">
		<!-- 用户信息部分 -->
		<view class="mine-userInfo" @click.stop="$u.utils.isLogin()">
			<view class="userInfo-avatar">
				<u-avatar size="140rpx"></u-avatar>
			</view>
			<!-- 登录时 -->
			<view class="userInfo-login" v-if="Object.keys(userInfo).length">
				<view class="userInfo-name">
					{{userInfo.name}}
				</view>
				<view class="userInfo-email">
					邮箱:{{userInfo.email}}
				</view>
				<view class="userInfo-createDate">
					创建日期：{{userInfo.created_at}}
				</view>
			</view>
			<!-- 未登录时 -->
			<view class="userInfo-offlogin" v-else >
				<text>游客</text>
			</view>
		</view>
		<!-- 修改信息部分 -->
		<view class="updateUserInfo" @click.stop="$u.utils.isLogin()">
			<u-cell-group>
				<u-cell icon="account" title="修改信息" size="large" :border='false' style="padding: 10rpx;"></u-cell>
			</u-cell-group>
		</view>
		<!-- 商品收藏样式 -->
		<view class="goodsSave" @click.stop="$u.utils.isLogin()">
			<u-cell-group>
				<u-cell icon="star" title="商品收藏" size="large" :border='false' style="padding: 10rpx;"></u-cell>
			</u-cell-group>
		</view>
		<!-- 登录时显示退出登录按钮 -->
		<u-button 
		type="primary" 
		text="退出登录" 
		size="large" 
		v-if="Object.keys(userInfo).length"
		@click="isShowModal = true"
		></u-button>
		<!-- 退出登录模态框 -->
		<u-modal 	
		:show="isShowModal" 
		:title="title" 
		:content='content'
		showCancelButton
		style="text-align: center;"
		@confirm='logout'
		@cancel='isShowModal = false'
		></u-modal>
	</view>
</template>

<script>
	import { authLogout } from "../../config/api.js"
	export default {
		data() {
			return {
				// 用户信息
				userInfo:{},
				// 模态框是否显示
				isShowModal:false,
				// 模态框标题
				title:'提示',
				// 模态框内容
				content:'确定退出登录？'
			}
		},
		methods: {
			// 模态框点击确定触发
			async logout(){
				this.isShowModal = false
				const res = await authLogout()
				uni.showToast({
					title:"退出成功！"
				})
				setTimeout(()=>{
					// 清除缓存token和用户信息
					this.$u.vuex("vuex_token",null)
					this.$u.vuex("vuex_user",{})
					
					// 跳转首页
					this.$u.route({type:"reLaunch",url:"pages/index/index"})
				},1500)
				
			}
		},
		onLoad(){
			this.userInfo=this.vuex_user
			// console.log(this.userInfo)
		}
	}
</script>

<style lang="scss">
	.mine{
		background-color: #ededed;
		height: calc(100vh - 94px);
		// 用户信息样式
		.mine-userInfo{
			padding: 10rpx 40rpx;
			background-color: #FFFFFF;
			height: 200rpx;	
			display: flex;
			align-items: center;
			// 未登录时用户样式
			.userInfo-offlogin{
				height: 140rpx;
				margin-left: 20rpx;	
				line-height: 140rpx;
				// font-weight: 700;
				font-size: 50rpx;
				color: skyblue;
			}
			// 登陆时样式
			.userInfo-login{
				height: 140rpx;
				margin-left: 20rpx;	
				display: flex;
				flex-direction: column;
				.userInfo-name{
					font-size: 40rpx;
					font-weight: 700;
					flex: 1;
				}
				.userInfo-email{
					color: #797c81;
					font-size: 26rpx;
				}
				.userInfo-createDate{
					color: #a1a5ab;
					font-size: 26rpx;
				}
			}
		}
		// 修改信息和商品收藏部分样式
		.updateUserInfo,.goodsSave{
			background-color: #FFFFFF;
			margin: 20rpx 0;
		}
	}
</style>
